<template>
	<view class="upload-pictures add-head">
		<view class="head-left">
			<view class="head-left-1">上传图片</view>
			<view class="head-left-2">图片建议大小不超过2M</view>
		</view>
		<view class="head-right" v-if="src==''" @click="chooseImage">
			<image src="../../static/icon/jia-.png" mode="aspectFit"></image>
		</view>
		<view class="head-right2" v-else @click="chooseImage">
			<image :src="src"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: ''
			}
		},
		
		methods: {
			chooseImage() {
				// 上传头像
				const self = this
				// let imgUrl = this.$u.http.config.imageUrl
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						uni.showLoading({
						    title: '上传中···'
						});
						uni.uploadFile({
							url: self.$u.http.config.uplodeUrl,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								uni.hideLoading();
								const result = JSON.parse(res.data)
								self.src = result.message;
								self.$emit('onImg', self.src)
								// self.personalInfo.avator = result.message
							},
							fail: (res) => {
								uni.hideLoading();
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		height: 180rpx;
		padding: 20rpx;
	
		.head-left {
			.head-left-1 {
				color: #000;
				font-size: 28rpx;
				font-weight: 600;
			}
	
			.head-left-2 {
				color: #999;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	
		.head-right {
			background-color: #999;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			width: 150rpx;
			height: 150rpx;
	
			image {
				width: 50%;
				height: 50%;
			}
		}
	
		.head-right2 {
			background-color: #999;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			width: 150rpx;
			height: 150rpx;
		}
	}
</style>
